<template>
  <div ref="loginb" class='login-show pr'>
    <component :is="componentId"></component>
  </div>
</template>
<script>
import ThrunderStorm from '../../../plugs/thunderstorm.vue'
import FireWorks from '../../../plugs/fireworks'
export default {
  components: {ThrunderStorm,FireWorks},
  name: "",
  data() {
    return {
      componentId:"FireWorks",
      settime:null,
      isAdd:true,
    };
  },
  methods: {
    getCid(){
      var path=_g.getRouterPath(this)
      var loginb=this.$refs.loginb
      if(path.indexOf("/sad")>-1){
        this.componentId="ThrunderStorm"
        this.settime=setInterval(()=>{
          if(loginb.classList.contains("bac_4")){
            this.isAdd=false
          }
          if(this.$refs.loginb.classList.length==2){
            this.isAdd=true
          }
          if(this.isAdd){
            this.$refs.loginb.classList.add("bac_"+(this.$refs.loginb.classList.length-1))
          }else{
            this.$refs.loginb.classList.remove("bac_"+(this.$refs.loginb.classList.length-2))
          }
        },8000)
      }else if(path.indexOf("/fireworks")>-1){
        this.componentId="FireWorks"
      }
    }
  },
  mounted() {
    this.getCid()
  },
  beforeDestroy(){
    clearInterval(this.settime)
  }
};
</script>
<style lang="scss" scoped>
.login-show{
  background-color: #fff;
  width: 100%;
  height: 100%;
  transition: all 10s;
}
.bac_1{
  background-color: #744a90;
}
.bac_2{
  background-color: #19101f;
}
.bac_3{
  background-color: #8c1c1c
}
.bac_4{
  background-color: #ff0000;
}
</style>